<template lang="html">
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i> 填写物流信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" :model="order" label-width="150px" @submit.native.prevent>
                <el-form-item label="请选择快递公司">
                    <el-select v-model="value" placeholder="请选择"  @change="selectOption">
                        <el-option
                        v-for="item in list"
                        :key="item.no"
                        :label="item.com"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物流快递单号">
                    <el-input v-model="order.expressCode"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确认发货</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list:[], //快递公司
                value:'',
                order: {
                    id: this.$route.params.id,
                    expressName: '',
                    expressCode: '',
                    expressNo:''
                },
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                //获取快递公司分类
                this.getList();
            })
        },
        methods: {
            getList(){
                var _this = this;
                //获取物流信息
                this.$axios.get('/manage/order/expressList',{}).then(response => {
                    // console.log(response)
                    if (response.data.resultcode == 200) {
                        var data =response.data.result;
                        if(data.length>0){
                            data.forEach(element => {
                                element.value =element.no+"|"+element.com;
                            });
                            _this.list = data;
                        }
                    }
                    else {
                        this.$notify.error({
                            title: '获取物流公司失败',
                            duration: 2000,
                            message: '失败原因：' + response.data.msg
                        });
                    }

                }).catch(error => {
                    console.log(error);
                });

            },
            selectOption(value){
                var data = value.split("|");
                this.order.expressNo=data[0];
                this.order.expressName=data[1];
            },
            onSubmit() {
                if (this.order.expressName == "") {
                    this.$message.error('请选择快递公司');
                    return false;
                }
                else if (this.order.expressCode == "") {
                    this.$message.error('请输入物流快递单号');
                    return false;
                } else {
                    const param =
                        {
                            id: this.order.id,
                            expressNo:this.order.expressNo,
                            expressName: this.order.expressName,
                            expressCode: this.order.expressCode,
                        }
                    this.sendGoods(param);
                }
            },
            sendGoods(param) {
                var _this = this
                const querystring = require('querystring');
                this.$axios.post('/manage/order/sendGoods', querystring.stringify(param)).then(response => {
                    // console.log(querystring.stringify(param))
                    if (response.data.code == 200) {
                        this.$message({
                            message: '物流添加成功',
                            type: 'success'
                        });
                        setTimeout(function () {
                            console.log("jump jump")
                            _this.$router.push({path: "/order"})
                        }, 1500);

                    }
                    else {
                        this.$notify.error({
                            title: '添加失败',
                            duration: 2000,
                            message: '失败原因：' + response.data.msg
                        });
                    }

                }).catch(error => {
                    console.log(error);
                });
            },
        }
    }
</script>

<style lang="stylus" scoped>
    .el-form-item .el-cascader {
        width: 400px;
    }

    .el-cascader-menus .el-cascader-menu {
        width: 240px
    }

    .sola-upload {

    .sola-left {
        width: 100%;
        height: auto;

    .sola-flex {
        float: left
        width: 360px;
        height: 180px;
        margin-bottom 20px;
        margin-right: 15px;
        position: relative;

    .delete {
        position: absolute;
        top: 2px;
        right: 13px;
        color: #f56c6c;
        display: inline-block;
        padding: 5px 5px;

    .el-alert__icon {
        font-size: 28px;
        cursor: pointer
    }

    }
    img {
        width: 100%;
        height: 100%;
    }

    }
    }
    .sola-file-box {
        position: relative;

    .btn-file {
        position: absolute;
        top: 0;
        left: 0;
        z-index 1;
        opacity: 0;
        width: 120px;
        height: 40px;
        outline: 0;
        background-color: none;
        cursor: pointer;
    }

    }

    }
</style>
